<template>
	<view class="content">
		<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData" label-position="top" label-width="200">
			<uni-forms-item label="手机号码" required name="ownerMobile">
				<uni-row class="parts-row" :gutter="30">
					<uni-col :span="16" >
						<uni-easyinput :maxlength="11" disabled v-model="baseFormData.ownerMobile" style="width:200rpx;display: inline-block;" placeholder="请输入联系方式" /> 
					</uni-col>
					<uni-col :span="8" v-if="!baseFormData.ownerMobile" >
						<u-button type="success" open-type="getPhoneNumber" style="width:200rpx;display: inline-block;"  @getphonenumber="getPhoneNumber">获取手机号</u-button>
					</uni-col>
				</uni-row>
			</uni-forms-item>
			<uni-forms-item label="车主姓名" required name="ownerName">
				<uni-easyinput v-model="baseFormData.ownerName" placeholder="请输入车主姓名" />
			</uni-forms-item>
		</uni-forms>
		<u-button type="primary" @click="submit">保 存</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: domain + "owner/file/upload",
				fileList: [],
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				baseFormData: {
					sex:0,
					ownerName: '',
					ownerMobile: "",
					remark: "",
					source:""
				},
				// 校验规则
				rules: {
					ownerName: {
						rules: [{
							required: true,
							errorMessage: '车主姓名不能为空'
						}]
					},
					// sex: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '性别不能为空'
					// 	}]
					// },
					ownerMobile:{
						rules: [{
							required: true,
							errorMessage: '联系方式不能为空'
						}]
					},
					// avatarUrl:{
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '头像不能为空'
					// 	}]
					// }
				},
				openid:uni.getStorageSync('openid'),
				source:'weixin'
			}
		},
		onLoad(){
			
			// #ifdef MP-WEIXIN
			   this.source = "weixin"
			// #endif
			
			// #ifdef H5
			   this.source = "H5"
			// #endif
			
			// #ifdef MP-ALIPAY
			   this.source = "alipay"
			// #endif
			this.init();
		},
		methods: {
            init(){
				uni.request({
					url:"owner/getUserInfo",
					method:"POST",
					data:{
						source:this.source,
						openid:this.openid
					},
					success:(res)=> {
						this.baseFormData = {
							...this.baseFormData,
							...res.data.data,
						}
						if(res.data.data.avatarUrl){
							this.fileList = [{url:res.data.data.avatarUrl}]
						}
					}
				})
			},
			getPhoneNumber(e){
				console.log(e.detail.code)  // 动态令牌
				uni.request({
					url:  "wxApp/getuserphonenumber?code="+e.detail.code,
					method:"GET",
					success:(res)=> {
						//手机号
						console.log(res.data.data.phone_info.purePhoneNumber);
						uni.request({
							url: "owner/updateMobileByOpenid?code="+e.detail.code,
							method:"POST",
							data:{
								openid:this.openid,
								purePhoneNumber:res.data.data.phone_info.purePhoneNumber
							},
							success:(res)=> {
								this.init();
								uni.showToast({
									title: '获取成功',
									duration: 2000,
								});	
							}
						})
						
					}
				})
			},
			submit(){
				this.$refs.baseForm.validate().then(res=>{
					console.log('表单数据信息：', res);
					this.save();
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			success(res){
				console.log(res);
				this.fileList = [{url:res.data.fileUrl}];
				this.baseFormData.avatarUrl = res.data.fileUrl;
			},
			remove(){
				this.fileList = [];
			},
			save(){
				uni.request({
					url:"owner/updateUserInfo",
					method:"POST",
					data:{
						...this.baseFormData,
						openid:this.openid,
					},
					success:(res) =>{
						console.log(res)
						if(res.data.ok){
							uni.switchTab({
								url: "/pages/my/index"
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: 0 20rpx;
	}
</style>